<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <ul >
          <li >
            <div >
              <div v-if="user===undefined || user===null">
                当前为游客身份请登录或注册
              </div>
              <div v-else>
                <el-avatar icon="jpg" :src="icon" :size="30"></el-avatar>
                <span style=" position:relative;top: -10px">
                  登录用户名:<span style="color: #20a0ff">{{user}}</span>
                  </span>
              </div>
            </div>
          </li>

          <li v-if="user===undefined || user===null">
            <el-button type="text" @click="login">登录</el-button>
          </li>
          <li v-else>
            <el-button type="text" @click="logout">退出登录</el-button>
          </li>
        </ul>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>


  </el-container>
  </div>
</template>

<script>

import 'layui/dist/css/layui.css'
import axios from "axios";
export default {
  name: 'HomeApp',
  data(){
    return{
      user:window.localStorage.getItem("UserName"),
      icon:window.localStorage.getItem("icon")
    }
  },
  mounted(){
    this.$router.push({
      path:"/JH"
    })
  },
  methods:{
    login(){
      this.$router.push({
            path:"/"
          }
      )
    },
    logout(){
      axios({
        url:"/login.do/logout",
        method:"GET"
      }).then(data=>{
        window.localStorage.removeItem("token");
        window.localStorage.removeItem("UserName")
        window.localStorage.removeItem("ID")
        window.localStorage.removeItem("icon")

      })
      this.$router.push({
            path:"/"
          }
      )

    }
  }

}
</script>

